<!-- Optional alert component at the top of the view -->
<app-alert></app-alert>

<!-- ---------------------------- Dev mode components -------------------------------- -->
<app-header *ngIf="gs.showDevUI()" ></app-header>

<div class="main-container">
  <table style="height:100%;width:100%"><tr>

    <!-- Dev mode left sidenav used as a mock navigator -->
    <td *ngIf="gs.showSidenav()" class="td-sidenav">
      <sidenav [parent]="instance"></sidenav>
    </td>
    <td class="td-subnav">
      <!-- Subnav tabs to switch between object views -->
      <subnav *ngIf="gs.showDevUI()" [objectId]="hostId" [objectType]="'host'"></subnav>

<!-- ---------------------------- Summary view content -------------------------------- -->
      <div class="content-container">

        <div class="content-area" style="padding: 5px">
          <div class="card-columns card-columns-2">
            <div class="card clickable">
              <div class="card-header">
                {{i18n.translate("summaryView")}}
              </div>
              <div class="card-block">
                {{i18n.translate("summaryView.content", hostId)}}
                <p>
                  <button (click)="nav.showObjectView(hostId, 'host', 'monitor')" class="btn btn-link">
                    {{i18n.translate("gotoMonitor")}}</button>
                  <button (click)="nav.showObjectView(hostId, 'host', 'manage')" class="btn btn-link">
                    {{i18n.translate("gotoConfigure")}}</button>
                </p>
              </div>
            </div>
          </div>

<!-- ---------------------------- Dev mode components -------------------------------- -->
          <div *ngIf="gs.showDevUI()" class="dev-ui">
             <p><clr-icon shape="info" size="24"></clr-icon>
               This view will be displayed has a portlet in the host's Summary page</p>
          </div>

        </div>
      </div>

    </td>
  </tr></table>
</div>
